<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
// 元素的属性操作：
// 1.元素节点对象的属性可以直接获取或设置（className id title src alt href type name value...）
// dom.id   dom.className   dom.id = '赋值';
// 2.标签上的属性不可以直接获取或设置（自定义属性）
// dom.getAttribute(属性名)获取属性的值
// dom.setAttribute(属性名,属性值)设置属性和属性值
// dom.removeAttribute(属性名)删除属性节点
// dom.getAttributNode(属性名)获取属性节点
// 3.标签上的data-x开头的属性：dom.dataset.x

// 封装获取元素的函数
// 1.单个元素可以直接操作
// 2.元素集合不能直接操作（不支持批量操作）

// 获取元素样式：
// 行间样式：写在标签style属性中的样式
// dom.style.width
// 非行间样式：不写在标签style属性中的样式
// getComputedStyle(dom).width 获取元素计算完成后的样式

// 文档碎片：
// 文档碎片是一种虚拟节点，不存在DOM树中
// 文档碎片是一个容器，里面存放元素节点
// 文档碎片用于性能优化，减少操作DOM
// document.createDocumentFragment()创建文档碎片

// client系列属性：
// clientWidth 获取元素宽度（包含width+padding，不含border）
// clientHeight 获取元素高度（包含height+padding，不含border）
// clientLeft 获取元素左边框宽度
// clientTop 获取元素上边框宽度

// offset系列属性:
// offsetWidth 获取元素宽度（包含width+padding+border）
// offsetHeight 获取元素高度（包含height+padding+border）
// offsetLeft 获取元素左侧距离最近的定位父级的距离
// offsetTop 获取元素顶部距离最近的定位父级的距离
// offsetParent 获取元素最近的定位父级（默认为body）

</script>
</body>
</html>